<template>
  <div class="DiseaseCodingMaintenance">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <div class="top_box">
            <el-input
              size="mini"
              style="display: inline-block; width: 20%"
              v-model="input_val"
              placeholder="请输入名称进行模糊搜索"
            ></el-input>
            <el-button
              size="small"
              style="margin-left: 15px"
              icon="el-icon-search"
              @click="(page.page = 1), getTableData()"
            ></el-button>
            <el-button
              size="small"
              style="margin-left: 15px"
              icon="el-icon-plus"
              @click="open"
            ></el-button>
            <el-button plain size="small" @click="exportLog"
              >Excel导出</el-button
            >
            <el-upload
              style="display: inline-block"
              class="ensure ensureButt"
              :limit="limitNum"
              :auto-upload="false"
              accept="*"
              :action="UploadUrl()"
              :before-upload="beforeUploadFile"
              :on-change="fileChange"
              :on-exceed="exceedFile"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
            >
              <el-button
                size="small"
                style="margin-left: 10px"
                v-loading.fullscreen.lock="fullscreenLoading"
                >Excel导入</el-button
              >
            </el-upload>
            <el-button type="text" style="float: right" @click="Excel_out"
              >Excel模板</el-button
            >
          </div>
          <div class="main_box">
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="table_loading"
                height="600"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  :index="
                    (index) => {
                      return page.limit * (page.page - 1) + index + 1;
                    }
                  "
                >
                </el-table-column>
                <el-table-column prop="OIDCode" label="OID编码">
                </el-table-column>
                <el-table-column prop="OIDName" label="OID名称">
                </el-table-column>
                <el-table-column prop="Code" label="编码"> </el-table-column>
                <el-table-column prop="Name" label="名称"> </el-table-column>
                <el-table-column prop="Remark" label="备注"> </el-table-column>
                <el-table-column prop="Version" label="版本号">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="table_items_edit(scope.row)"
                    ></el-button>
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="table_items_del(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!-- 页码 -->
            <div class="block">
              <el-pagination
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.limit"
                @current-change="page_change"
                :current-page="page.page"
              >
              </el-pagination>
            </div>
          </div>
          <!-- 弹窗 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-form
              label-position="right"
              label-width="120px"
              :model="formLabelAlign"
            >
              <el-form-item
                label="*OID编码"
                style="display: inline-block; width: 50%"
              >
                <el-input v-model="formLabelAlign.OIDCode"></el-input>
              </el-form-item>
              <el-form-item
                label="*OID名称"
                style="display: inline-block; width: 50%"
              >
                <el-input v-model="formLabelAlign.OIDName"></el-input>
              </el-form-item>
              <el-form-item
                label="*编码"
                style="display: inline-block; width: 50%"
              >
                <el-input v-model="formLabelAlign.Code"></el-input>
              </el-form-item>
              <el-form-item
                label="*名称"
                style="display: inline-block; width: 50%"
              >
                <el-input v-model="formLabelAlign.Name"></el-input>
              </el-form-item>
              <el-form-item
                label="备注"
                style="display: inline-block; width: 50%"
              >
                <el-input v-model="formLabelAlign.Remark"></el-input>
              </el-form-item>
              <el-form-item
                label="*版本号"
                style="display: inline-block; width: 50%"
              >
                <el-input v-model="formLabelAlign.Version"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="btn_ok">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exportExcelMethod } from "@/utils";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      input_val: "",
      page: {
        page: 1,
        limit: 12,
        total: 1,
      },
      dialogVisible: false,
      formLabelAlign: {},
      title: "",
      table_loading: false,
      fileList: [],
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      isInfor: false,
      fullscreenLoading: false,
    };
  },
  methods: {
    getTableData() {
      //获取表格数据
      this.table_loading = true;
      this.$post(
        "/ICDManage/List?category=ICD-10&keyword=" +
          this.input_val +
          "&page=" +
          this.page.page +
          "&limit=" +
          this.page.limit
      ).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data.list;
          this.page.total = res.data.TotalCount;
          this.table_loading = false;
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.table_loading = false;
        }
      });
    },
    open() {
      //弹层开启按钮事件
      this.formLabelAlign.Id ? (this.title = "修改") : (this.title = "新增");
      this.dialogVisible = true;
    },
    handleClose() {
      //弹层关闭操作事件
      this.dialogVisible = false;
      this.formLabelAlign = {};
    },
    btn_ok() {
      if (
        this.formLabelAlign.OIDCode == "" ||
        this.formLabelAlign.OIDCode == null ||
        this.formLabelAlign.OIDName == "" ||
        this.formLabelAlign.OIDName == null ||
        this.formLabelAlign.Code == "" ||
        this.formLabelAlign.Code == null ||
        this.formLabelAlign.Name == "" ||
        this.formLabelAlign.Name == null ||
        this.formLabelAlign.Version == "" ||
        this.formLabelAlign.Version == null
      ) {
        this.$message({
          message: "请完整填写必填项！",
          type: "error",
        });
        return;
      }
      //弹层确定按钮事件
      let url = this.formLabelAlign.Id
        ? "/ICDManage/Update/ICD10"
        : "/ICDManage/Create/ICD10";
      let body = this.formLabelAlign;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.handleClose();
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    table_items_edit(val) {
      //表格编辑操作事件
      var info = JSON.stringify(val);
      this.formLabelAlign = JSON.parse(info);
      this.open();
    },
    table_items_del(val) {
      //表格删除操作事件
      let id = val.Id;
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("/ICDManage/Delete/" + id).then((res) => {
            if (res.code == 0) {
              this.getTableData();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
        })
        .catch((_) => {});
    },
    page_change(val) {
      //页码切换事件
      this.page.page = val;
      this.getTableData();
    },
    exportLog() {
      //导出
      const url = "/ICDManage/Export?category=ICD-10";
      const data = this.tableData;
      const myObj = {
        method: "get",
        url: url,
        fileName: "标准ICD10",
        token: this.token,
        data: { data },
      };
      exportExcelMethod(myObj);
    },
    Excel_out() {
      // excel导出模板
      // const url = 'http://192.168.0.210:8002/TemplateFile/标准ICD-10导入模板.xlsx'
      const url = baseUrl.bsIp + "/TemplateFile/标准ICD-10导入模板.xlsx"; // 香格里拉
      const data = this.tableData;
      const myObj = {
        method: "get",
        url: url,
        fileName: "ICD_10导入模板",
        token: this.token,
        data: { data },
      };
      exportExcelMethod(myObj);
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 移除前调用
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //移除时调用
    handleRemove(file, fileList) {
      this.fileList = [];
      this.fileList.length <= 0
        ? (this.isInfor = false)
        : (this.isInfor = true);
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fullscreenLoading = true;
      console.log(file.raw);
      this.fileList.push(file.raw);
      console.log(this.fileList);
      this.uploadFile();
      // this.isInfor = true
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      console.log("before upload");
      console.log(file);
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.$message.success("文件上传成功");
      this.$refs.upload.clearFiles();
      this.isInfor = false;
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$message.error("文件上传失败");
    },
    // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
    UploadUrl: function () {
      return "";
    },
    uploadFile() {
      var formFile = new FormData();
      console.log(this.fileList[0]);
      formFile.append("file", this.fileList[0]); //加入文件对象
      var data = formFile;
      $.ajax({
        // url: "http://192.168.0.210:8002/v1/UploadData/Api/PostAttachments?imgType=file",
        url: baseUrl.bsIp + "/v1/UploadData/Api/PostAttachments?imgType=file", // 香格里拉
        data: data,
        type: "POST",
        dataType: "json",
        cache: false, //上传文件无需缓存
        processData: false, //用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须
      }).then((res) => {
        this.$post(
          "/ICDManage/Import?path=" + res.data.attachUrl + "&category=ICD-10"
        ).then((res) => {
          console.log(res);
          this.fileList = [];
          this.$message({
            message: "导入成功",
            type: "success",
          });
          this.getTableData();
          this.fullscreenLoading = false;
        });
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getTableData();
  },
};
</script>
<style lang="scss">
.DiseaseCodingMaintenance {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .top_box {
    margin: 10px;
  }
  .main_box {
    margin: 10px;
    text-align: center;
  }
  .el-upload__input {
    display: none !important;
    // display: inline-block;
    // margin-left: 10px;
  }
}
</style>
